<template>
    <div class="box">
        <div class="cardbox">
            <div class="bgc" :style="{
                backgroundImage: `linear-gradient(to bottom, ${color} ,#fff`
            }">
            </div>
            <div class="content">
                <h2>{{ title }}</h2>
                <div class="num" :style="{
                    backgroundColor: `${color}`
                }">
                    <span>{{ num }}</span>
                </div>
                <div class="receiveInfo">
                    <span>{{ receiveInfo }}</span>
                    <span>（{{unit}}）</span>
                </div>
                <div class="receiveMoney" :style="{
                    color: `${color}`
                }">{{ receiveMoney | moneyTransfer }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: () => {
                return "项目总数"
            }
        },
        num: {
            type: Number,
            default: () => {
                return 16
            }
        },
        receiveInfo: {
            type: String,
            default: () => {
                return "收入合同额"
            }
        },
        unit:{
            type: String,
            default: () => {
                return "万元"
            }
        },
        receiveMoney: {
            type: Number,
            default: () => {
                return 206908.06
            }
        },
        color: {
            type: String,
            default: () => {
                return '#6393E8'
            }
        },
    },
    data() {
        return {

        }
    },
    filters: {
        moneyTransfer(value) {
            let str = value.toString()
            //整数
            let z = Number(str.split(".")[0])
            //小数
            let x = str.split(".")[1]
            let arr = []
            arr.unshift(x)
            arr.unshift('.')
            while (true) {
                let a = z % 1000
                z = Math.floor(z / 1000)
                if (z > 0) {
                    arr.unshift(a)
                    arr.unshift(',')
                    continue
                }else {
                    arr.unshift(a)
                    break
                }
            }
            return arr.join('')
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    .cardbox {
        border-radius: 5px;
        // box-shadow: 0 4px 39px 0 rgba(0, 0, 0, 0.0784313725);
        border: 1px solid #ddd;
        // opacity: 0.2;
        position: relative;

        .bgc {
            z-index: 999;
            position: absolute;
            border-radius: 5px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.2;
        }

        .content {
            position: relative;
            z-index: 1000;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            padding: 15px 0;
            box-sizing: border-box;
            h2 {
                margin: 0 !important;
                padding: 0 !important;
                font-size: 16px;

            }

            .num {
                color: #fff;
                border-radius: 50%;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                height: 40px;
                width: 40px;
                box-sizing: border-box;
                margin: 15px;
                font-weight: 700;

                span {
                    display: block;
                }
            }

            .receiveInfo {
                color: #666666;
                padding: 5px 0;

                span {
                    font-size: 12px;

                    &:nth-child(1) {
                        font-size: 14px;
                    }
                }
            }

            .receiveMoney {
                font-size: 14px;
                padding: 5px 0;
                font-weight: 700;
            }
        }
    }
}
</style>